import React, { useState, useMemo } from 'react';
import { Layout, Space } from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Menu, Button, theme } from 'antd';

export default function index() {
  // 页面布局
  const { Header, Footer, Sider, Content } = Layout;

  // 页面样式
  const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 50,
    lineHeight: '64px',
    backgroundColor: '#2C3039',
  };

  const contentStyle = {
    margin: '24px 16px',
    padding: 24,
    minHeight: 900,
    background: '#FFFFFF',
  };

  const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    backgroundColor: '#2C3039',
  };

  const footerStyle = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#7dbcea',
  };

  // 侧边栏数据
  var cval = [
    {
      key: '1',
      icon: <UserOutlined />,
      label: '请假申请',
    },
    {
      key: '2',
      icon: <UserOutlined />,
      label: '批假申请',
    },
    {
      key: '3',
      icon: <UserOutlined />,
      label: '教务管理',
    },
    {
      key: '4',
      icon: <UserOutlined />,
      label: '数据中心',
    },
    {
      key: '5',
      icon: <UserOutlined />,
      label: '个人中心',
    },
  ];

  return (
    <div>
      <Layout>
        <Header style={headerStyle}>
          请假系统后台管理
        </Header>
        <Layout hasSider>
          <Sider style={siderStyle}>
            <div className="demo-logo-vertical" />
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              onClick={(e) => {
                console.log(e);
              }}
              style={{ siderBg: 'red' }}
              items={cval}
            />
          </Sider>
          <Content style={contentStyle}>Content</Content>
        </Layout>
        <Footer style={footerStyle}>Footer</Footer>
      </Layout>
    </div>
  );
}
